<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
 
  <link rel="stylesheet" href="./css/myCssReset.css">
  
  <title>趣读中文网</title>
  <style>

.container{
  margin-left: 50px;
  margin-right: 50px;
 
}

.zdy-nav {
  margin-top: 30px;
  width: 100%;
  height: 100px;
 


}

.nav {
 
  width: 100%;
  height: 36px;
  
  
  display: flex;
  justify-content: space-between;
  }

  .nav >div{
  
  width: 30%;
  height: 100%;
  
  }


.zdy-nav .nav .nav-logo img{
  width: 167px;
  height: 55px;
}
.nav-sesrch input{
  width: 60%;
  float: left;
  height:30px;
}
  .nav-sesrch .shousuo {
  float: left;
  width: 42px;
    height: 34px;
   background: url(./img/search.png) no-repeat center center #d32f2f;

}
.nav-xbt{
  text-align: right;
}

.nav-xbt a {
  color: black;
  line-height: 36px;
  padding-left: 30px;
  
}
.nav2 ul li a:hover {
        color: red;
        border-bottom: 4px solid red ;
      }

  
.zdy-nav .nav2{
  
  margin-top: 30px;
  width: 100%;
  height: 30px;
 
  
  }

  
  .nav2 ul li a {
    
    
  float: left;
    
    color: #333;
    font-size: 20px;
    line-height: 30px;
    font-weight: 700;
    margin-right: 50px;
  }


.fgx {

  border-top:3px solid  #ddd;


}
.content{
margin-top: 50px;
width: 80%;
position: relative;

}

.content >p {
  margin-bottom: 10px;
  font-size: 12px;
}
.content .book-xbt{
  

  width: 100%;
  height: 30px;
  background-color: #ddd;
  line-height: 30px;
  background: #f7f7f7;


}

.book-xbt ul li a {
  color: #333;
  display: block;
  float: left;
  margin-right: 30px;
  
  
  
}

.book-content {
  margin-top: 20px ;
  width: 100%;
  height: 133px;
  
  padding:20px;
 
}

.book-content .book-synopsis{
  float: left;
width: 100%;
height: 150px;
position: relative;
border-bottom: 2px solid #ddd;



}
.book-synopsis >img {
  display: block;
  float: left;
  
}
.book-synopsis >h5 {
  float: left;
 margin-left: 20px;
  font-size: 24px ;
  color: #d32f2f;
  font-weight: 500;
  
}
.book-synopsis .introduce {
  
  float: left;
  margin-top: 10px;
  
  margin-top: 60px;
 width: 600px;
 
  font-size: 12px;
  
  
}
.book-synopsis .introduce p {
  float: left;
  margin-left: -95px;
margin-top: 10px;
font-size: 12px;
    color: #666;
    line-height: 20px;
}

 .book-synopsis .btn {
  float: left;
 width: 100px;
 height: 100px;
 position: absolute;
 right: 0;

 
} 
.book-synopsis .btn a {
  float: left;
  color: #d32f2f;
}
.book-synopsis .btn .btn1{
  padding: 5px;
  background: #e84848;
  border-radius: 2px;
    color: #fff;
}
.book-synopsis .btn .btn2{
  margin-top: 10px;
  border: 1px solid #e6e6e6;
    border-radius: 2px;
    color: #333;
    padding: 5px;
}
.book-synopsis .btn .btn1:hover{
  background-color:rgba(77, 74, 74, 0.9);
}
.book-synopsis .btn .btn2:hover{
  border:1px solid red;
}

.book-synopsis {
  margin-bottom: 20px;
}


.content-right{
  
  float: right;
  width: 18%;
  height: 470px;
  border: 1px solid #ddd;
}
.content-right h4 {
  font-size: 14px;
  padding-left: 10px;
}

.content-right .content-right-typ {
  padding-left: 5px;
  margin-bottom: 10px;
  margin-top: 10px;
  height: 80px;
}
.content-right .content-right-typ img {
  margin-right: 10px;
  float: left;
  display: block;
  width: 51px;
  height: 68px;
 
}



.content-right ul li {
 
 
  padding-bottom: 10PX;
  font-size: 12px;
}

.content-right ul li a {
  color: #666;
}


/* 页尾 */
.row {
  display: flex;
  width: 100%;
  height: 50px;
  flex-direction: column
  
  

} 
.row ul{
  
  margin: auto;
}
.row ul li {
  
  
 text-align: center;
  border: 1px solid #ccc;
    border-radius: 1px;
    width: 33px;
    height: 33px;
    display: inline-block;
    margin: 0 3px;
    font-size: 14px;
    color: #999;
    vertical-align: middle;
    line-height: 33px;
}
.row ul li a {
color: #999;
}


.footgray {
  margin: auto;
  margin-top: 40px;
  padding-bottom: 30px;
}

.footgray a{
  color: #666;
  margin-left: 6px;
}
.footgray a:hover{color: #d60a0a;}
.footgray span{
  color: #dbd9d9;
  margin-left: 6px;
}



  </style>
</head>

<body>
  
    <!-- 导航栏 -->
    <div class="container">
   <div class="zdy-nav">
     <!-- 导航栏1 -->
   <div class="nav">
      <div class="nav-logo"><img src="./img/下载.png" alt=""></div>
      <div class="nav-sesrch">
        <input type="text">
        
        <button class="shousuo"></button>
      </div>


      <div class="nav-xbt">
        <a href="#">登录</a>
        <a href="#">注册</a>
        <a href="#">充值</a>
      </div>

   </div>
   <!-- 导航栏2 -->
   <div class="nav2">
     <ul>
       <li><a href="./index.html">首页</a></li>
       <li><a href="./oeuvre.html">书库</a></li>
       <li><a href="./ranking list.html">排行</a></li>
       <li><a href="#">完本</a></li>
       <li><a href="#">漫画</a></li>
       <li><a href="#">移动端</a></li>
      
      
      </ul>
   </div>

   </div>
  </div>
   <!-- 分割线 -->
   <div class="container"><div class="fgx"></div></div>
   

 <!-- 查询相关结果栏 -->

   <div class="container">
   <!-- 大家都在搜 -->
<div class="content-right">
  <h4 >大家都在搜</h4>
  <div class="content-right-typ">
  <img src="./img/2904f0260aaf977f54bc88b75254bbeb.jpeg" alt="">
    <ul >
      <li><a href="#" style="color: #333;">超品神瞳</a></li>
      <li><a href="#">都市娱乐</a></li>
      <li>父亲失踪，幼妹又要读书...</li>
      </ul>
    <div></div>
  </div>

  <div class="content-right-typ">
    <img src="./img/1392113669943.jpg" alt="">
      <ul >
        <li><a href="#" style="color: #333;">国色生枭</a></li>
        <li><a href="#">历史军事</a></li>
        <li>六龙聚兵，菩萨开门！...</li>
        </ul>
      <div></div>
    </div>

    <div class="content-right-typ">
      <img src="./img/1415960236469.jpg" alt="">
        <ul >
          <li><a href="#" style="color: #333;">符皇</a></li>
          <li><a href="#">奇幻玄幻</a></li>
          <li>制神符，炼体魄，修无上...</li>
          </ul>
        <div></div>
      </div>

      <div class="content-right-typ">
        <img src="./img/626d287916b7126236238162828be491.jpeg" alt="">
          <ul >
            <li><a href="#" style="color: #333;">仙都</a></li>
            <li><a href="#">武侠仙侠</a></li>
            <li>七年磨一剑，西北望流...</li>
            </ul>
          <div></div>
        </div>
        <div class="content-right-typ">
          <img src="./img/2904f0260aaf977f54bc88b75254bbeb.jpeg" alt="">
            <ul >
              <li><a href="#" style="color: #333;">超品神瞳</a></li>
              <li><a href="#">都市娱乐</a></li>
              <li>父亲失踪，幼妹又要读书...</li>
              </ul>
            <div></div>
          </div>
</div>

  <!-- 查询内容 -->
<div class="content">
  <p>相关结果</p>
  

<!-- 小标题栏 -->
<div class="book-xbt">
<ul>
  <li><a href="#">默认</a></li>
  <li><a href="#">总字数</a></li>
  <li><a href="#">总字数</a></li>
  <li><a href="#">点击量</a></li>
  <li><a href="#">更新时间</a></li>
 
</ul>
</div>

<!-- 小说介绍详情 -->
<div class="book-content">

  
<div class="book-synopsis ">
  <img src="./img/jiumeng.jpg" alt="" style="width: 100px;height: 132px;">
  <h5>旧梦寄余生</h5>
  <div class="introduce">
  <p>会计师与小说家穿梭在各个年代，在那里他们发生了许多的爱情故事！

    有发生在民国的，有发生在上个世纪香港台湾的，有发生在现代的!
    
    老故事里充满惆怅，而老故事外，男女主角终将收获甜美爱情......。</p></div>
  <div class="btn">
    <a href="./details.html" class="btn1">书籍详情</a>
    <a href="#" class="btn2">加入书架</a>
  </div>


</div>

<div class="book-synopsis ">
  <img src="./img/3b0bbe89a6b500f8e44e2c1676eb9b78.jpeg" alt="" style="width: 100px;height: 132px;">
  <h5>万战之王</h5>
  <div class="introduce">
  <p>一纸婚约， 突然此刻未婚妻上门，正要说出三十年河东，三十 年河西，莫欺少年穷。结果未婚妻竟不同意退婚， 让我们看李桐如何在这个仙侠世界一步一步走向巅峰。</p></div>
  <div class="btn">
    <a href="#" class="btn1">书籍详情</a>
    <a href="#" class="btn2">加入书架</a>
  </div>


</div>

<div class="book-synopsis ">
  <img src="./img/084ca9059c2304f60b3103c2189da5d0.jpeg" alt="" style="width: 100px;height: 132px;">
  <h5>特战之王</h5>
  <div class="introduce">
  <p>那升起的，终将坠落。 那美好的，终将破碎。 那日光下的一切， 都是虚妄。 我从黑暗中来，带着永恒的威严。 弹指遮天，举世无敌。 人生在世，当如天骄。</p></div>
  <div class="btn">
    <a href="#" class="btn1">书籍详情</a>
    <a href="#" class="btn2">加入书架</a>
  </div>


</div>

<div class="book-synopsis ">
  <img src="./img/084ca9059c2304f60b3103c2189da5d0.jpeg" alt="" style="width: 100px;height: 132px;">
  <h5>特战之王</h5>
  <div class="introduce">
  <p>那升起的，终将坠落。 那美好的，终将破碎。 那日光下的一切， 都是虚妄。 我从黑暗中来，带着永恒的威严。 弹指遮天，举世无敌。 人生在世，当如天骄。</p></div>
  <div class="btn">
    <a href="#" class="btn1">书籍详情</a>
    <a href="#" class="btn2">加入书架</a>
  </div>


</div>

<div class="book-synopsis ">
  <img src="./img/084ca9059c2304f60b3103c2189da5d0.jpeg" alt="" style="width: 100px;height: 132px;">
  <h5>特战之王</h5>
  <div class="introduce">
  <p>那升起的，终将坠落。 那美好的，终将破碎。 那日光下的一切， 都是虚妄。 我从黑暗中来，带着永恒的威严。 弹指遮天，举世无敌。 人生在世，当如天骄。</p></div>
  <div class="btn">
    <a href="#" class="btn1">书籍详情</a>
    <a href="#" class="btn2">加入书架</a>
  </div>


</div>

<div class="book-synopsis ">
  <img src="./img/084ca9059c2304f60b3103c2189da5d0.jpeg" alt="" style="width: 100px;height: 132px;">
  <h5>特战之王</h5>
  <div class="introduce">
  <p>那升起的，终将坠落。 那美好的，终将破碎。 那日光下的一切， 都是虚妄。 我从黑暗中来，带着永恒的威严。 弹指遮天，举世无敌。 人生在世，当如天骄。</p></div>
  <div class="btn">
    <a href="#" class="btn1">书籍详情</a>
    <a href="#" class="btn2">加入书架</a>
  </div>


</div>




</div>
</div>

</div>




<div class="row">
  <ul>
    <li><a href="#"><</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">></a></li>
</ul>

<!-- 页尾区 -->
<div class="footgray">
  <a href="#">关于趣读</a>
  <span>|</span>
  <a href="#">诚聘英才</a>
  <span>|</span>
  <a href="#">商务合作</a>
  <span>|</span>
  <a href="#">法律声明</a>
  <span>|</span>
  <a href="#">帮助中心</a>
  <span>|</span>
  <a href="#">作者投稿</a>
  <span>|</span>
  <a href="#">联系我们</a>
  <span>|</span>
  <a href="#">友情链接</a>
  <span>|</span>
  <a href="#">谨防诈骗</a>
 </div>

</div>
</body>

</html>